<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<style>
    #toolbar {
        background: rgba(42, 42, 42, 0.8);
        padding: 4px;
        border-radius: 4px;
    }
    #toolbar input {
        vertical-align: middle;
        padding-top: 2px;
        padding-bottom: 2px;
    }
</style>
<body>
<div id="cesiumContainer">
</div>
<div id="toolbar">
    <div>Height</div>
    <input type="range" min="-100.0" max="100.0" step="1" data-bind="value: height, valueUpdate: 'input'">
    <input type="text" size="5" data-bind="value: height">
</div>
<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer',{
        shadows : true
    });

    viewer.scene.globe.depthTestAgainstTerrain = true;

    var viewModel = {
        height: 0
    };

    Cesium.knockout.track(viewModel);

    var toolbar = document.getElementById('toolbar');
    Cesium.knockout.applyBindings(viewModel, toolbar);

    var tileset = new Cesium.Cesium3DTileset({
        url: '../data/Cesium3DTiles/Tilesets/Tileset/tileset.json'
    });

    tileset.readyPromise.then(function(tileset) {
        viewer.scene.primitives.add(tileset);
        viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0));
    }).otherwise(function(error) {
        console.log(error);
    });

    Cesium.knockout.getObservable(viewModel, 'height').subscribe(function(height) {
        height = Number(height);
        if (isNaN(height)) {
            return;
        }

        var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
        var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
        var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
        var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
    });


</script>
</body>

</html>